<template>
	<view class="page_content">
		<image src="/static/mine/register_logo.png" mode="aspectFill" style="width: 244rpx;height: 204rpx;"></image>
		<text class="company_title">欢迎使用隆宇电力智慧管理平台</text>
		<text class="tips_title">完成注册，体验更多功能</text>
		
		<view class="input_row">
			<image src="/static/mine/register_phone.png" mode="aspectFill" style="margin-left: 34rpx;width: 21rpx;height:28rpx;"></image>
			<input class="input_class" placeholder-style="color:#9CA3AF" cursor-color="#4B5563" type="text" v-model="phoneNo" placeholder="请输入手机号码" disabled/>
		</view>
		<view class="input_row">
			<image src="/static/mine/register_user.png" mode="aspectFill" style="margin-left: 34rpx;width: 24.5rpx;height:28rpx;"></image>
			<input class="input_class" placeholder-style="color:#9CA3AF" cursor-color="#4B5563" type="text" v-model="userName" placeholder="请输入您的用户名"/>
		</view>
		<view class="input_row">
			<image src="/static/mine/register_user.png" mode="aspectFill" style="margin-left: 34rpx;width: 24.5rpx;height:28rpx;"></image>
			<input class="input_class" placeholder-style="color:#9CA3AF" cursor-color="#4B5563" type="text" v-model="nickName" placeholder="请输入您的昵称"/>
		</view>
		<view class="input_row">
			<image src="/static/mine/register_desp.png" mode="aspectFill" style="margin-left: 34rpx;width: 28rpx;height:28rpx;"></image>
			<input class="input_class" placeholder-style="color:#9CA3AF" cursor-color="#4B5563" type="text" v-model="position" placeholder="请输入您的职位"/>
		</view>
		
		<button v-if="phoneNo.length == 0" class="button_submit" type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">手机号码快捷授权</button>
		<view class="button_submit" v-else @click.stop="registerAction">
			申请注册
		</view>
		<view class="safe_logo_tips">
			<u-checkbox v-model="isAgreed" @click="agreeBtnClicked"></u-checkbox>
			<view>
				我已详细阅读并同意<text class="safe_logo_high_tips" @click.stop="serviceProtocol">《服务协议》</text>和<text class="safe_logo_high_tips" @click.stop="privacyProtocol">《隐私政策》</text>
			</view>
		</view>
		
		<!-- 蒙层 -->
		<view class="mask" v-if="phoneNo.length == 0" @tap.stop="closeModal"></view>
		<view class="modal-container" v-if="phoneNo.length == 0">
		<view class="modal-content">
		  <text class="tip">授权绑定手机号码</text>
		  <button class="btn-group" type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">绑定手机号</button>
		</view>
	  </view>
		
	</view>
</template>

<script>
import BaseUserInfo from '@/user/baseUserInfo.js';
	export default {
		data() {
			return {
				phoneNo:'',
				userName:'',
				nickName:'',
				position:'',
				openId:'',
				unionId:'',
				isAgreed:false
			}
		},
		onLoad(){
			this.openId = this.$weixinAuth.openId;
			console.log(this.openId)
		},
		methods: {
			decryptPhoneNumber(e){
				console.log(e)
				let iv = e.detail.iv;
				let encryptedData = e.detail.encryptedData;
				let self = this;
				
				self.$progressHud.showLoading();
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						console.log(loginRes.code);
						self.$NetApi.postMethod('/loyu-api/app/wechat/getPhoneNumber',{
							wxCode:loginRes.code,
							encryptedData:encryptedData,
							iv:iv,
							openid:self.openId
						}).then(ok => {
							self.$progressHud.hideLoading();
							console.log(ok)
							self.phoneNo = ok.data.phoneNumber;
							self.unionId = ok.data.unionId;
						}, fail => {
							self.$progressHud.hideLoading();
							self.$progressHud.showToast(fail.errMsg || '网络错误');
						})
					},
					fail: (error) => {
						console.log(error);
						self.$progressHud.hideLoading();
						self.$progressHud.showToast(error.errMsg || '网络错误');
					}
				})
			},
			registerAction(){
				if(!this.isAgreed) {
					this.$progressHud.showToast('请先勾选同意服务条款');
					return;
				}
				if(this.userName.length == 0) {
					this.$progressHud.showToast('请先填您的用户名');
					return;
				}
				if(this.nickName.length == 0) {
					this.$progressHud.showToast('请先填写您的昵称');
					return;
				}
				// if(this.position.length == 0) {
				// 	this.$progressHud.showToast('请先填写职位');
				// 	return;
				// }
				
				let self = this;
				self.$progressHud.showLoading();
				self.$NetApi.postMethod('/loyu-api/app/wechat/register',{
					nickName:self.nickName,
					userName:self.userName,
					phoneNo:self.phoneNo,
					position:self.position,
					openId:self.openId,
					unionId:self.unionId
				}).then(ok => {
					self.$progressHud.hideLoading();
					console.log(ok)
					let userInfo = new BaseUserInfo({
						nickName:ok.data.sysUser.nickName || '',
						userName:ok.data.sysUser.userName || '',
						phonenumber:ok.data.sysUser.phonenumber || '',
						userId:ok.data.sysUser.userId || '',
						token:ok.data.token || '',
						position:ok.data.sysUser.position || '',
						roles:ok.data.sysUser.roles || [],
						sysUserItems:ok.data.sysUser.sysUserItems || []
					});
					self.$userMgr.updateCurrentUserInfo(userInfo);
					uni.setStorageSync('token', ok.data.token);
					uni.navigateBack()
				}, fail => {
					self.$progressHud.hideLoading();
					self.$progressHud.showToast(fail.errMsg || '网络错误');
				})
			},
			serviceProtocol(){
				this.$Router.push({
					path:'/pages/register/serviceAgreement',
					query:{}
				})
			},
			privacyProtocol(){
			  // #ifdef MP-WEIXIN
			  wx.openPrivacyContract({
				success: () => console.log('打开成功'),
				fail: (err) => console.error('打开失败', err)
			  })
			  // #endif
			},
			agreeBtnClicked(){
				this.isAgreed = !this.isAgreed
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page_content{
		width: 100%;
		min-height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		background-color: #FFF;
	}
	.company_title{
		font-size: 18px;
		font-weight: normal;
		line-height: 56rpx;
		text-align: center;
		letter-spacing: normal;
		color: #4B5563;
		
		margin-top: 10rpx;
	}
	.tips_title{
		font-size: 18px;
		font-weight: 500;
		line-height: 56rpx;
		letter-spacing: normal;
		color: #1F2937;
		
		margin-top: 34rpx;
		margin-bottom: 48rpx;
	}
	.input_width{
		width: calc(100% - 96rpx);
		flex: 0;
	}
	.input_row{
		width: calc(100% - 96rpx);
		border: 2rpx solid #e5e7eb;
		border-radius: 24rpx;
		height: 100rpx;
		margin-bottom: 48rpx;
		
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		flex-shrink: 0;
		color: #4B5563;
	}
	.input_class{
		flex: 1;
		margin-left: 24rpx;
		margin-right: 34rpx;
		
		font-size: 16px;
		font-weight: normal;
		line-height: 48rpx;
		letter-spacing: normal;
		
	}
	.button_submit{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 20rpx;
		
		border-radius: 24rpx;
		background: $power-color-primary;
		width: calc(100% - 96rpx);
		height: 104rpx;
		color: #FFF;
		font-size: 28rpx;
		font-weight: 500;
		line-height: 42rpx;
		margin-top: 80rpx;
		margin-bottom: 50rpx;
	}
	
	/* 蒙层样式 */
	.mask {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background: rgba(0,0,0,0.5);
	  z-index: 999;
	}
	
	/* 弹窗容器 */
	.modal-container {
	  position: fixed;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  z-index: 1000;
	  width: 80%;
	  background: #fff;
	  border-radius: 12rpx;
	  padding: 30rpx;
	  animation: scaleIn 0.3s ease;
	}
	@keyframes scaleIn {
	  from { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
	  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
	}
	.modal-content{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.tip{
		font-size: 28rpx;
	}
	.btn-group{
		border-radius: 16rpx;
		background: $power-color-primary;
		width: 100%;
		height: 80rpx;
		color: #FFF;
		font-size: 28rpx;
		font-weight: 500;
		line-height: 80rpx;
		margin-top: 20rpx;
	}
	.safe_logo{
		display: flex;
		flex-direction: row;
		align-items: center;
		column-gap: 16rpx;
		margin-bottom: 32rpx;
		
		font-size: 28rpx;
		font-weight: normal;
		line-height: 40rpx;
		text-align: center;
		letter-spacing: normal;
		color: #6B7280;
	}
	.safe_logo_tips{
		font-size: 24rpx;
		font-weight: normal;
		line-height: 32rpx;
		text-align: center;
		letter-spacing: normal;
		color: #6B7280;
		margin-bottom: 60rpx;
		width: calc(100% - 96rpx);
		
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
	}
	.safe_logo_high_tips{
		color: $power-color-primary;
	}
	
	.safe_logo_tips ::v-deep .u-checkbox__label {
		margin-right: 0px !important;
	}
</style>
